<template>
	<view class="home-page">
		<CustomNav :isBack="false" color="#fff" :topBgColor="topBgColor"></CustomNav>
		<image :src="imgStorage+'/home/home_bg3.png'" class="home-bg" mode="widthFix"></image>
		<view class="info-block">
			<view class="news-block">
				<view class="news-item" v-for="item in newsList" :key="item.id">
					<view class="news-title LENGKU">{{item.title}}</view>
					<view class="news-content">{{item.content}}</view>
					<view class="small-btn normal">{{item.text}}</view>
				</view>
			</view>
			<view class="title">常用功能</view>
			<view class="menu-item-full" @click="goPay">
				<view class="menu-item-info">
					<image :src="imgStorage+'/home/fangzujiaona.png'" class="menu-icon"></image>
					<view class="menu-full">
						<view class="menu-title">房租缴纳</view>
						<view class="menu-text">保障性住房缴租</view>
					</view>
				</view>
				<image :src="imgStorage+'/home/youjiantou.png'" class="menu-right"></image>
			</view>
			<view class="menu-block">
				<view class="menu-item" v-for="item in menuList" :key="item.id" @click="navigate(item.path)">
					<view class="menu-info">
						<view class="menu-title">{{item.title}}</view>
						<view class="menu-text">{{item.text}}</view>
					</view>
					<image :src="imgStorage+item.icon" class="menu-icon"></image>
				</view>
			</view>
			<view class="menu-item-full">
				<view class="menu-item-info">
					<view class="menu-full">
						<view class="menu-title">缴费记录</view>
						<view class="menu-text">房租、物业费缴费记录</view>
					</view>
				</view>
				<view class="menu-item-info" @click="navigate('/page_pack/my_pages/pay_record/rent')">
					<view class="menu-full-info">
						<image :src="imgStorage+'/home/zfjilu.png'" class="menu-icon"></image>
						<view class="menu-name">房租缴费记录</view>
					</view>
				</view>
				<view class="menu-full-info" @click="navigate('/page_pack/my_pages/pay_record/property')">
					<image :src="imgStorage+'/home/wyfjilu.png'" class="menu-icon"></image>
					<view class="menu-name">物业费缴费记录</view>
				</view>
			</view>
			<view class="title">通知公告</view>
			<NewsList :list="list"></NewsList>
		</view>
	</view>
</template>

<script>
	import {
		getStorage,
		setStorage,
		removeStorage
	} from '@/util/auth.js';
	import {
		getLoginUserFwJoinApi,
		getFwInfoByIdApi
	} from '@/api/rent_payment.js'
	export default {
		components: {},
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				newsList: [{
					id: 1,
					title: '正在办理',
					content: '您的续租申请审核已通过',
					text: '去续签',
					path: ''
				}],
				menuList: [{
						id: 1,
						title: '物业费缴纳',
						text: '物业费缴纳',
						icon: '/home/wuyefei.png',
						path: '/page_pack/rent_payment/rent_payment?type=2'
					},
					{
						id: 2,
						title: '续签申请',
						text: '线上发起续租申请',
						icon: '/home/xuqian.png',
						path: '/page_pack/renewal/renewal'
					},
					{
						id: 3,
						title: '物业故障报修',
						text: '在线一键报修',
						icon: '/home/guzhangbaoxiu.png',
						path: '/page_pack/repair/repair'
					},
					{
						id: 4,
						title: '投诉举报',
						text: '转租等现象投诉举报',
						icon: '/home/tousu.png',
						path: '/page_pack/complaint/complaint'
					},
				],
				list: [{
						id: 1,
						subject: '肃州区2024年度经济适用住房定向出售公告',
						noticeTime: '2025-03-11 15:35'
					},
					{
						id: 2,
						subject: '肃州区2024年度经济适用住房定向出售公告',
						noticeTime: '2025-03-11 15:35'
					},
					{
						id: 3,
						subject: '肃州区2024年度经济适用住房定向出售公告',
						noticeTime: '2025-03-11 15:35'
					}
				],
				selectId: null
			}
		},
		watch: {

		},
		methods: {
			//onShareAppMessage 分享给朋友
			onShareAppMessage: function(res) {
				if (res.from === 'button') {

				}
				return {
					title: '廉租房收费系统',
					path: '/pages/index/index'
				}
			},
			onShareTimeline() { // 分享到朋友圈
				return {
					title: '廉租房收费系统',
					path: '/pages/index/index'
				}
			},
			getList() {
				getLoginUserFwJoinApi().then((res) => {
					if (!getStorage('selectInfo')) {
						if (res.length > 0) {
							setStorage('selectInfo', res[0])
							this.selectId = res[0].id
						}
					} else {
						this.selectId = getStorage('selectInfo').id
					}
				})
			},
			goPay() {
				getFwInfoByIdApi({
					id: this.selectId
				}).then((res) => {
					setStorage('selectInfo', res)
					//先交保证金
					if (res.needDepositPaid) {
						this.navigate('/page_pack/bond/bond?id=' + res.id + '&price=' + res.needDepositPaid +
							'&buildingArea=' + res.buildingArea + '&houseType=' + res.houseType +
							'&idValue=' + res.idValue + '&id=' + res.id + '&payableTotalPrice=' +
							res.payableTotalPrice)
					} else if (res.rentToBePaid || res.needPropertyFee || res.lateFee) {
						//再交房租、物业、滞纳金
						this.navigate('/page_pack/rent_payment/arrears?id=' + res.id)
					} else {
						//无欠费，进续交
						if (this.type && this.type === 1) {
							this.navigate('/page_pack/rent_payment/info')
						} else {
							this.navigate('/page_pack/property/property')
						}
					}
				})
			}
		},
		onLoad() {

		},
		onShow() {
			if (getStorage('token')) {
				this.getList()
			}
			if (getStorage('houseInfo')) {
				removeStorage('houseInfo')
			}
			if (getStorage('formInfo')) {
				removeStorage('formInfo')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-page {
		overflow: hidden;
		opacity: 1;
		background: rgba(252, 63, 59, 0.9);

		.home-bg {
			width: 100%;
			position: absolute;
		}

		.info-block {
			position: relative;
			padding: 30rpx;
			margin-top: 420rpx;

			.news-block {
				background: rgba(255, 255, 255, .9);
				padding: 30rpx 20rpx;
				border-radius: 20rpx;

				.news-item {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.news-title {
						font-size: 40rpx;
						color: $theme-color;
						width: 165rpx;
						font-weight: normal;
					}

					.news-content {
						font-size: 26rpx;
						width: calc(100% - 310rpx);
						text-align: start;
					}

					.small-btn {
						width: 140rpx;
					}
				}
			}

			.title {
				font-size: 36rpx;
				color: #fff;
				font-weight: bold;
				margin: 30rpx 0;
			}

			.menu-item-full {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 30rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;

				.menu-item-info {
					display: flex;
					align-items: center;

					.menu-icon {
						width: 130rpx;
						height: 130rpx;
						margin-right: 10rpx;
					}

					.menu-full {

						.menu-title {
							font-weight: bold;
							font-size: 34rpx;
							margin-bottom: 30rpx;
						}

						.menu-text {
							font-size: 24rpx;
							color: #767676;
						}
					}
				}


				.menu-right {
					width: 45rpx;
					height: 45rpx;
				}

				.menu-full-info {
					display: flex;
					flex-direction: column;
					align-items: center;

					.menu-icon {
						width: 90rpx;
						height: 90rpx;
					}

					.menu-name {
						font-size: 24rpx;
						margin-top: 10rpx;
					}
				}
			}

			.menu-block {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.menu-item {
					width: calc(50% - 10rpx);
					margin-top: 20rpx;
					background-color: #fff;
					border-radius: 20rpx;
					padding: 30rpx 0 30rpx 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.menu-icon {
						width: 110rpx;
						height: 110rpx;
					}

					.menu-info {
						width: calc(100% - 110rpx);

						.menu-title {
							font-weight: bold;
							font-size: 34rpx;
							margin-bottom: 20rpx;
						}

						.menu-text {
							font-size: 24rpx;
							color: #767676;
						}
					}
				}
			}
		}
	}
</style>